<template>
 <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" :id="'sel'+id" :checked="checked" @change="stateChange"   />
        <label class="custom-control-label" :for="'sel'+id"  >
          <!-- 商品的缩略图 -->
          <img  alt="商品图片" class="thumb" :src="thumb" />
        </label>
      </div>
    </div>

    <!-- 右侧信息区域 -->
    <div class="right">
      <!-- 商品名称 -->
      <div class="top">{{ title }}</div>
      <div class="bottom">
        <!-- 商品价格 -->
        <div class="price">￥{{ price.toFixed(2) }}</div>
        <!-- 商品数量 -->
        <div class="count">
            <!-- 使用 es-counter 组件 -->
            <es-counter :num="count" :min="1" @numChange="getNumber"  ></es-counter>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EsCounter from '../es-counter/EsCounter.vue'
export default {
  components: { EsCounter },
  name: 'EsGoods',
  emits:['stateChange','countChange'],
  props:{
    // 唯一的 key 值
    id:{
        type:[String,Number], // id 的值可以是"字符串" 也可以是 "数值"
        required:true
    },
    // 1.商品的缩略图
    thumb:{
        type:String,
        required:true
    },
    // 2.商品的名称
    title:{
        type:String,
        required:true
    },
    // 3.单价
    price:{
        type:Number,
        required:true
    },
    // 4.数量
    count:{
        type:Number,
        required:true
    },
    // 5.商品的勾选状态
    checked:{
        type:Boolean,
        required:true
    }
  },
  methods:{
    stateChange(e){
        
        // console.log(e.target.checked)
        this.$emit('stateChange',{
            id:this.id,
            chk:e.target.checked
        })
    },
    // 监听数量变化的事件
    getNumber(num){
        // console.log(num)

        this.$emit('countChange',{
            id:this.id,
            num:num
        })

    }
  }
}
</script>


<style lang="less" scoped>
.goods-container {
    /*    
        最终生成的选择器为 .goods-container + .goods-container
        在 css 中，（+）是“相邻兄弟选择器”，表示：选择紧连着另一元素后的元素，二者具有相同的父元素。
    */
  + .goods-container {
    border-top: 1px solid #efefef;
  }
  display: flex;
  padding: 10px;
  // 左侧图片的样式
  .left {
    margin-right: 10px;
    // 商品图片
    .thumb {
      display: block;
      width: 100px;
      height: 100px;
      background-color: #efefef;
    }
  }
  // 右侧商品名称、单价、数量的样式
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .top {
      font-weight: bold;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
}

.custom-control-label::before,
.custom-control-label::after {
  top: 3.4rem;
}
</style>
